// 导入样式文件，这个文件定义了页面的外观和布局
import "./home.less";
// 导入轮播图组件，这个组件可以让图片自动切换显示
import { createCarousel } from "../../components/Carousel chart/Carousel chart";
// 导入网络请求工具，用来从服务器获取数据
import apiClient from "../../services/request";

// 创建一个轮播图，在页面上找到class为c1的容器，在里面显示class为c1-1的图片
createCarousel(".c1", ".c1-1");

// 定义一个商品信息的结构，就像填写表格一样，每个商品都有这些信息
interface GoodsItem {
  goods_thumb?: string;    // 商品图片的网址（可选）
  brand_thumb?: string;    // 品牌logo的网址（可选）
  brand_name?: string;     // 品牌名称（可选）
  star_number?: string | number; // 喜欢人数，可以是文字或数字（可选）
  price?: number | string;  // 商品价格，可以是数字或文字（可选）
  goods_name?: string;     // 商品名称（可选）
  goods_desc?: string;     // 商品描述（可选）
}

// 这个函数用来处理图片网址，确保图片能正常显示
function normalizeUrl(url?: string | null): string {
  // 如果没有传入网址或者网址是空的，就返回空字符串
  if (!url) return "";
  
  // 把网址转换成字符串并去掉前后空格
  const value = String(url).trim();
  
  // 如果处理后的网址还是空的，就返回空字符串
  if (!value) return "";
  
  // 如果网址已经是完整的网址（以http://、https://或data:开头），直接返回
  if (
    value.startsWith("http://") ||
    value.startsWith("https://") ||
    value.startsWith("data:")
  ) {
    return value;
  }
  
  // 如果网址以//开头，加上当前页面的协议（http或https）
  if (value.startsWith("//")) {
    return `${window.location.protocol}${value}`;
  }
  
  // 定义服务器的地址
  const API_HOST = "http://8.134.172.28:3008";
  
  // 如果网址以/开头，直接拼接到服务器地址后面
  if (value.startsWith("/")) {
    return `${API_HOST}${value}`;
  }
  
  // 其他情况，在服务器地址后面加上/和网址
  return `${API_HOST}/${value}`;
}

// 这个函数用来安全地把各种值转换成数字，避免出错
function toSafeNumber(value: unknown, fallback = 0): number {
  // 如果已经是数字并且不是无穷大，直接返回
  if (typeof value === "number" && Number.isFinite(value)) return value;
  
  // 如果是字符串，去掉空格后不是空的，并且能转换成数字，就转换成数字
  if (
    typeof value === "string" &&
    value.trim() !== "" &&
    !Number.isNaN(Number(value))
  ) {
    return Number(value);
  }
  
  // 其他情况都返回默认值（fallback）
  return fallback;
}

// 这个函数用来创建一个商品卡片，就像制作一张商品名片
function createCardElement(item: GoodsItem): HTMLElement {
  // 处理商品图片：如果有就用商品的图片，没有就用默认的logo图片
  const image = normalizeUrl(item.goods_thumb || "/src/assets/images/logo.png");
  
  // 处理品牌logo：如果有就用品牌的logo，没有就用默认的logo图片
  const brandLogo = normalizeUrl(
    item.brand_thumb || "/src/assets/images/logo.png"
  );
  
  // 品牌名称：如果有就用品牌的名称，没有就显示"未知品牌"
  const brandName = item.brand_name || "未知品牌";
  
  // 喜欢人数：安全地转换成数字，如果没有就显示0
  const likes = toSafeNumber(item.star_number, 0);
  
  // 价格：如果有价格就显示，没有就显示"价格未知"
  const price = item.price || "价格未知";
  
  // 商品标题：如果有标题就显示，没有就显示"标题缺失"
  const title = item.goods_name || "标题缺失";
  
  // 商品描述：如果有描述就显示，没有就显示"副标题缺失"
  const subtitle = item.goods_desc || "副标题缺失";

  // 创建一个div元素来装整个商品卡片
  const wrapper = document.createElement("div");
  
  // 给这个div添加一个class名称"c4a"，这样CSS样式才能找到它
  wrapper.className = "c4a";
  
  // 设置这个div里面的HTML内容，就像用积木搭建一个商品卡片
  wrapper.innerHTML = `
    <!-- 商品图片区域 -->
    <div class="c4-1">
      <a href="#"><img src="${image}" alt="商品图片" /></a>
    </div>
    
    <!-- 品牌信息区域 -->
    <div class="c4-2">
      <div class="c4-2-1">
        <a href="#" class="brand-link">
          <div class="brand-logo">
            <img src="${brandLogo}" alt="品牌Logo" />
          </div>
          <div class="brand-name">${brandName}</div>
        </a>
      </div>
      
      <!-- 喜欢人数区域 -->
      <div class="c4-2-2">
        <a href="#">${likes}</a>
        <img src="../../assets/images/aixin.svg" alt="喜欢图标" />
      </div>
    </div>
    
    <!-- 价格和标题区域 -->
    <div class="c4-3">
      <div class="c4-3-1">$${price}.00</div>
      <div class="c4-3-2">${title}</div>
      <div class="c4-3-3">${subtitle}</div>
    </div>
  `;
  
  // 返回制作好的商品卡片
  return wrapper;
}

// 定义服务器返回的数据格式，就像约定好通信的暗号
interface ApiResponse<T = any> {
  code: number;     // 状态码：0表示成功，其他数字表示失败
  data: T;          // 实际的数据内容，比如商品列表
  message?: string; // 可选的错误信息，如果出错了会告诉你为什么
}

// 这个函数用来从服务器获取商品数据，async表示这是一个异步操作（需要等待）
async function fetchGoods(
  page: number = 1,       // 页码，默认是第一页
  pageSize: number = 9    // 每页显示多少商品，默认是9个
): Promise<GoodsItem[]> { // 返回一个商品列表的承诺（Promise）
  try {
    // 向服务器发送GET请求，获取商品数据
    const response: ApiResponse<GoodsItem[]> = await apiClient.get(
      "/api_goods",        // 请求的网址路径
      {
        params: { 
          page,           // 传递页码参数
          pageSize,       // 传递每页数量参数
          type: "hot",    // 请求热门商品
          score: "3.5"    // 评分要求3.5分以上
        },
      }
    );

    // 根据接口文档，响应数据在 data 字段中
    // 如果服务器返回成功（code为0）并且data是数组，就返回商品数据
    if (response?.code === 0 && Array.isArray(response.data)) {
      return response.data as GoodsItem[];
    }
    
    // 如果请求失败或者数据格式不对，返回空数组
    return [];
  } catch (e) {
    // 如果网络请求出错了（比如网络断开），在这里捕获错误
    console.warn("请求热门商品失败", e); // 在控制台输出警告信息
    return []; // 仍然返回空数组，避免程序崩溃
  }
}

// 这个函数负责加载商品并显示到页面上
async function loadGoods(): Promise<void> {
  // 一次性请求18条数据（第1页，每页18个商品）
  // await表示要等待fetchGoods函数完成，拿到商品列表
  const goodsList = await fetchGoods(1, 18);
  
  // 在页面上找到class为c4的容器，商品卡片要放在这里面
  const container = document.querySelector(".c4");
  
  // 如果找不到这个容器，就直接返回，什么都不做
  if (!container) return;

  // 清空容器里面的所有内容，准备放入新的商品卡片
  container.innerHTML = "";
  
  // 对每一个商品数据，都创建一个商品卡片并添加到容器中
  goodsList.forEach((item) => {
    // 为当前商品创建一个卡片
    const card = createCardElement(item);
    
    // 把制作好的商品卡片添加到容器中
    container.appendChild(card);
  });
}

// 页面加载完成后，执行loadGoods函数来加载商品
// 这就像说："好了，现在开始加载商品吧！"
loadGoods();
